{% extends 'IcsocUIBundle::page.html.twig' %}
{% from 'IcsocUIBundle:Macro:actions.html.twig' import create %}
{% from 'IcsocUIBundle:Macro:formValidator.html.twig' import jqvalidator %}
{% form_theme form _self %}
{% block number_widget -%}
    {# type="number" doesn't work with floats #}
    {%- set type = type|default('text') %}
        <input type="{{ type }}" {{ block('widget_attributes') }} {% if value is not empty %}value="{{ value }}" {% endif %}/>
{%- endblock number_widget %}
{% block stylesheet %}
    {{ parent() }}
    {% stylesheets
    '@gritter_css'
    '@jquery_ui_css'
    filter='cssrewrite' filter='uglifycss'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}
{% block content %}
    <div class="page-content">
            {{ form_start(form, {'attr':{'id':'validation-form'}}) }}
                {{ form_row(form.vcc_code) }}
                {{ form_row(form.pho_type) }}
                <div id="pho_type">
                     {{ form_row(form.pho_num) }}
                </div>
                <div id="sip" class="hidden">
                    <div class="form-group">
                        {{ form_label(form.pho_start) }}
                        <div class="col-sm-3">{{ form_widget(form.pho_start) }}<div class="col-sm-1"></div>{{ form_widget(form.pho_end) }}</div>
                    </div>
                    <div class="form-group">
                        {{ form_label(form.passtype) }}
                        {{ form_widget(form.passtype) }}
                    </div>
                    <div class="form-group" id="passnumber" style="display:none">
                        <div class="col-sm-3"></div>
                        <div class="col-sm-9">
                         {{ form_widget(form.pho_pass) }}
                        </div>
                    </div>
                </div>
                {{ create(path('icsoc_phone_manage_index')) }}
            {{ form_end(form) }}
    </div>
{% endblock %}
{% block footer %}
    {% javascripts
    '@jqvalidate_js'
    '@jquery_ui_js'
    '@autosize_js'
    '@common_js'
    filter='uglifyjs'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script>
        $('#phone_info_form_pho_num').autosize({append: "\n"});
        function switchOption(objName)
        {
            var val = getSoundType(objName);
            if (val == 5 || val == 3) {
                $('#'+objName).attr('class', 'hidden');
                $('#sip').attr('class', 'show');
                $('#phone_info_form_pho_num').attr("required", false);
                $('#phone_info_form_pho_start').attr("required", true);
                $('#phone_info_form_pho_end').attr("required", true);
                $('#phone_info_form_pho_pass').attr("required", true);
            } else {
                $('#'+objName).attr('class', 'show');
                $('#sip').attr('class', 'hidden');
                $('#phone_info_form_pho_start').attr("required", false);
                $('#phone_info_form_pho_end').attr("required", false);
                $('#phone_info_form_pho_pass').attr("required", false);
                $('#phone_info_form_pho_num').attr("required", true);
                $('#phone_info_form_pho_start').tooltip("close");
            }
        }
        $(document).ready(function(){
            $('#phone_info_form_pho_start').tooltip(); //初始化tooltip;
            switchOption('pho_type');
        });
        $('#validation-form').validate({
            {{ jqvalidator() }}
            success: function(lable) {
                var type = getSoundType("pho_type");
                if (type == 5) {
                    $(lable.parent()).attr('class', 'form-group');
                } else {
                    $(lable.parent().parent()).attr('class', 'form-group');
                }
            },
            errorPlacement: function(error, element){
                error.attr('class','help-block col-xs-7 col-sm-5');
                var id = element[0].id;
                if (id == 'phone_info_form_pho_start' || id == 'phone_info_form_pho_end') {
                    error.appendTo(element.parent().parent());

                    return false;
                } else {
                    error.appendTo(element.parent());
                }

                $(element.parent().parent()).attr('class','form-group has-error');
            },
            rules: {
                'phone_info_form[pho_num]': {
                    required:function(){
                        var type = getSoundType('pho_type');
                        return type != 5 ? true : false;
                    },
                    isPhone: isVali()
                },
                'phone_info_form[pho_type]':{
                    required: false
                },
                'phone_info_form[passtype]': {
                    required: false
                },
                'phone_info_form[pho_pass]': {
                    'required': false
                },
                'phone_info_form[pho_start]':
                {
                    isPhoneNum: function() {
                        var type = getSoundType('pho_type');
                        return type == 5 ? true : false;
                    }
                },
                'phone_info_form[pho_end]':
                {
                    isPhoneNum: function() {
                        var type = getSoundType('pho_type');
                        return type == 5 ? true : false;
                    },
                    required: false
                }

            },
            messages: {
                'phone_info_form[pho_num]': {required:"{{ 'Telephone number can not be empty'|trans  }}", isPhone:'{{ 'The phone number is not in the correct format'|trans }}'},
                'phone_info_form[pho_start]': {required:"{{  'SIP extension number  can not be empty'|trans}}", isPhoneNum:"{{ 'SIP extension number 4 digits in the beginning of the 8'|trans }}"},
                'phone_info_form[pho_end]': {isPhoneNum:"{{ 'SIP extension number 4 digits in the beginning of the 8'|trans }}"}
            }
        })

        //分机号验证
        jQuery.validator.addMethod("isPhoneNum", function(value, element) {
            if (value.length >=1 ) {
                var phone = /^\d\d\d\d$/;
                return this.optional(element) || (phone.test(value));
            }
            return true;
        }, "");
        jQuery.validator.addMethod("isPhone", function(value, element) {
            var words = value.split('\n');
            var flag = true;
            var reg = /^\d[\d\-]*\d$/;
            for (var i = 0; i<words.length; i++) {
                var word = $.trim(words[i]);
                if (word.length >= 1) {
                    if (!reg.test(word)) {
                        flag = false;
                        break;
                    }
                }
            }
            return flag;
        }, "");

        function isVali(flag)
        {
            var type = getSoundType('pho_type');
            if (flag == 1) {
                return type == 5 ? true : false
            } else {
                return type != 5 ? true : false
            }
        }
        /**
         * 获取sound_type
         */
        function getSoundType(objName)
        {
            var name = "phone_info_form["+objName+"]";
            var objs = $("input[name='"+name+"']");
            var val = 0;
            for (var i=0; i<objs.length;i++) {
                if (objs[i].checked) {
                    val = $(objs[i]).val();
                }
            }
            return val;
        }
        function showPassnum()
        {
            var passType = getSoundType('passtype');
            passType == 2 ? $('#passnumber').show() : $('#passnumber').hide();
        }
        $(document).ready(function (){
            $('[data-rel=tooltip]').tooltip({container:'body'});
        })
    </script>
{% endblock %}